<template>
  <nav class="footer">
    <ul>
      <router-link to="/home" tag="li">
        <span>图</span>
        <em>首页</em>
      </router-link>
      <router-link to="/kind" tag="li">
        <span>图</span>
        <em>分类</em>
      </router-link>
      <router-link to="/cart" tag="li">
        <span>{{sum}}</span>
        <em>购物车</em>
      </router-link>
      <router-link to="/my" tag="li">
        <span>图</span>
        <em>我的</em>
      </router-link>
    </ul>
  </nav>
</template>

<script>
import { getCart } from '@/request/index.js'
import { mapMutations, mapState } from 'vuex'
export default {
  data () {
    return {
      sum: 0
    }
  },
  methods: {
    ...mapMutations({
      change_cartList: 'cart/change_cartList'
    })
  },
  computed: {
    ...mapState({
      isLogin: state => state.login.isLogin
    })
  },
  mounted () {
    if (this.isLogin === 'ok') {
      getCart().then(data => {
        // this.$store.commit('cart/change_cartList', data.data.data.proData)
        this.change_cartList(data.data.data.proData)
        this.sum = this.$store.getters.sum
      })
    } else {
      this.sum = 0
    }
  }
}
</script>

<style lang="scss">
.footer{
  height: 0.8rem;
  width:100%;
  background: #efefef;
  ul{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    li{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      height: 100%;
      em{
        margin-top: 0.1rem;
        font-style: normal;
        font-size: 20px;
      }
    }
    .router-link-active{
      background: red;
      color: #fff;
    }
  }
}
</style>
